<template>
    <div>
        <newDetail :detail="detail"></newDetail>

    <!-- 缩略图区域 -->
    <div class="thumbs">
      <!-- 注意：这里使用的 vue-preview 组件是版本 1.1.3,
           之前上课录屏时候, 所使用的 1.0.5 版本的 vue-preview 存在 Bug -->
      <vue-preview :slides="list"></vue-preview>
    </div>

        <newComment :id="id" :url="'api/getcomments'"></newComment>
    </div>
</template>

<script>
//引入组件
import newDetail from '../common/Detail.vue'
import newComment from '../common/Comment.vue'

export default {
    data() {
        return {
            id: this.$route.params.id,
            detail:{},
            list:[]
        }
    },
    created() {
        this.getPhotoInfo()
        this.getThumbs()
    },
    methods: {
        getPhotoInfo(){
            this.$http.get('api/getimageInfo/'+this.id).then(result=>{
                if(result.body.status === 0){
                    this.detail = result.body.message.length > 0 ? result.body.message[0] : {}
                }else{
                    this.$toast('获取图片详情失败:'+result.body.message)
                }
            })
        },
        getThumbs(){
            this.$http.get('api/getthumimages/' + this.id).then(result=>{
                if(result.body.status === 0){
                    result.body.message.forEach(item => {
                        item.w = 600
                        item.h = 600
                        item.msrc = item.src
                    })
                    // 把完整的数据保存到 list 中
                    this.list = result.body.message
                }else{
                    this.$toast('获取图片失败:'+result.body.message)
                }
            })
            
        }
    },
    components:{
        newDetail,newComment
    }
    
}
</script>

<style lang="less" scoped>
.photoinfo-container {
  padding: 3px;
  h3 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }

  .content {
    font-size: 13px;
    line-height: 30px;
  }
}
</style>

<style lang="scss">
.thumbs {
  .my-gallery {
    display: flex;
    flex-wrap: wrap;
  }
  figure {
    width: 100px;
    height: 100px;
    margin: 10px;
    box-shadow: 0 0 8px #999;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>